<template>
  <el-card class="box-card">
    <el-form :inline="true" :model="form">
      <el-form-item label="类型">
        <el-select v-model="form.type" placeholder="请选择类型">
          <el-option label="所有" value="" />
          <el-option label="成功" value="S" />
          <el-option label="异常" value="F" />
        </el-select>
      </el-form-item>
      <el-form-item label="执行时间">
        <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格部分 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop label="序号" type="index" width="50" align="center" />
      <el-table-column label="标题" prop="title" align="center" />
      <el-table-column label="IP地址" prop="ip" width="120" align="center" />
      <el-table-column label="请求方式" prop="method" show-overflow-tooltip align="center" />
      <el-table-column label="操作时间" prop="createTime" width="160" align="center" />
      <el-table-column label="操作者" prop="createBy" width="80" align="center" />
      <el-table-column label="请求地址" prop="requestUri" show-overflow-tooltip align="center" />
      <el-table-column prop="params" label="操作参数" show-overflow-tooltip align="center" />
      <el-table-column prop="userAgent" label="用户代理" show-overflow-tooltip align="center" />
      <el-table-column label="类型" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.type === "S" ? "成功" : "异常" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            v-if="$formatFR(logManage.del)"
            plain
            @click="handleDel(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <base-pagination
      :size="form.size"
      :current="form.current"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></base-pagination>
  </el-card>
</template>

<script>
import { logList, del } from "@/api/system/log"
import FUNCROLELIST from "@/utils/func_role/system"
export default {
  data() {
    return {
      logManage: FUNCROLELIST.log,
      form: {
        type: "",
        size: 10,
        current: 1
      },
      date: null,
      tableData: [],
      total: 0
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    reset() {
      this.form = {
        type: "",
        size: 10,
        current: 1
      }
      this.date = null
      this.getList()
    },
    handleCurrentChange(val) {
      this.form.current = val
      this.getList()
    },
    handleSizeChange(val) {
      this.form.size = val
      this.getList()
    },
    // 搜索
    handleSearch() {
      this.form.current = 1
      this.getList()
    },
    // 参数数据列表
    getList() {
      const params = {
        ...this.form
      }
      if (this.date != null) {
        params.beginDate = this.date[0]
        params.endDate = this.date[1]
      }
      logList(params).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    // 删除
    handleDel(id) {
      this.$confirm("请确认是否删除当前参数?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        del(id).then(() => {
          this.getList()
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        })
      })
    }
  }
}
</script>
